<%--
  Created by IntelliJ IDEA.
  User: zhangDongFei
  Date: 2020/11/15
  Time: 14:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客房</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <%--    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>--%>

</head>
<body style="padding: 3px">

<div class="layui-elem-field">
    <form class="layui-form layui-form-pane" id="searchNewsFrom">
        <div class="layui-row">
            <div class="layui-inline layui-col-md-offset1">
                <label class="layui-form-label">房间号</label>
                <div class="layui-input-block">
                    <input type="text" name="roomcode" class="layui-input" placeholder="房间编号">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">房间类型</label>
                <div class="layui-input-inline">
                    <input type="text" name="tname" class="layui-input" placeholder="房间类型">
                </div>
                <button type="button" data-type="reload"
                        class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search"
                        lay-submit lay-filter="searchBtn">搜索
                </button>
            </div>
        </div>
    </form>
</div>

<%--添加客房弹出框--%>
<div id="addGustRoomForm" style="display: none">
    <form class="layui-form layui-from-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">客房号</label>
            <div class="layui-input-inline">
                <input type="text" name="roomcode" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间类型</label>
            <div class="layui-input-inline">
                <select name="typeid" id="roomtype1">
                    <option value="0" selected>房间类型</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" id="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<div id="updGustRoomForm" style="display: none">
    <form class="layui-form layui-from-pane" action="" lay-filter="modify">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-inline">
                <input type="text" name="id" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客房号</label>
            <div class="layui-input-inline">
                <input type="text" name="roomcode" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间类型</label>
            <div class="layui-input-inline">
                <select name="typeid" id="roomtype2">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status" id="status">
                    <option value="0" >正常</option>
                    <option value="1" id="lz">故障</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" id="formDemo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addGust">添加</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

    <%--
    {{# if(d.a>1) {}}
    <a class="layui-btn layui-btn-disabled layui-btn-xs" lay-event="del">删除</a>
    {{# }else { }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#}}}
    --%>
<%--    lay-event="del"--%>
    <a class="layui-btn layui-btn-disabled layui-btn-xs" >删除</a>

</script>
<table class="layui-hide" id="test" lay-filter="test"></table>
</body>
<script>
    layui.use(['table','layer','form','jquery'], function(){
        var table = layui.table;
        var layer =layui.layer;
        var $ =layui.jquery;
        var form =layui.form;
        let roomtype;
        getRoomType();
        var condition = "";
        $(function () {
            showTable();
        })

        function showTable() {

            table.render({
                elem: '#test' //id为test的table
                , limit: 5
                , limits: [5, 10, 15]
                , request: {
                    pageName: 'curr' //页码的参数名称，默认：curr
                    , limitName: 'nums' //每页数据量的参数名，默认：nums
                },
                where: {condition: condition}
                , url: '${pageContext.request.contextPath}/gustroom/show'  //url 查询数据   所有的客户的数据
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '客房信息'
                , cols: [[
                    {field: 'id', title: 'ID', fixed: 'left', sort: true}
                    , {field: 'roomcode', title: '房间号', sort: true}
                    , {field: 'tname', title: '房间类型', sort: true}
                    , {
                        field: 'status', title: '状态', sort: true, templet: function (res) {
                            //res  这一行的内容
                            var f = res.status;//状态值
                            if (f === 0) {
                                //正常
                                return "正常";
                            } else {
                                return "故障";
                            }
                        }
                    }
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                ]]
                , page: true
            });
        }

        //查询的提交事件
        form.on('submit(searchBtn)', function (data) {
            condition="";
            if(data.field.roomcode!=null && data.field.roomcode.trim()!=="" ){
                condition += " and roomcode like '%"+data.field.roomcode.trim()+"%' ";
            }
            if(data.field.tname!=null && data.field.tname.trim()!==""){
                condition += " and t.name like '%"+data.field.tname.trim()+"%' ";
            }
            showTable();
            return false;
        });





        //监听行工具事件  test  表格的id
        table.on('tool(test)', function(obj){
            //obj 代表 一行的内容
            var data = obj.data; //一行的数据
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    // obj.del();//页面删除
                    $.ajax({
                        url:'${pageContext.request.contextPath}/gustroom/del',
                        type:"post",
                        async:false,
                        dataType:"JSON",
                        data:{id:data.id},
                        success:function (flag) {
                            if(flag>0){
                                layer.msg("删除成功");
                            }else {
                                layer.msg("删除失败,您不配删除操作数据");
                            }
                        },
                        error:function (flag) {
                            layer.msg("服务器内部出错");
                        }
                    });
                    // 关闭弹出框
                    layer.close(index);
                    layer.closeAll();
                    //刷新一下table
                    table.reload('test', {
                        page: {
                            curr: 1
                        }
                    });
                });
            } else if(obj.event === 'edit'){

                var tid;
                $.each(roomtype, function (index, item) {
                    if(item.name === data.tname ){
                        tid = item.id;
                        return;
                    }
                })
                // 给房间类型下拉框添加数据
                $("#roomtype2").empty();
                $.each(roomtype, function (index, item) {
                    let tr = "<option value='" + item.id + "'>" + item.name + "</option>"
                    $("#roomtype2").append(tr);
                })
                form.render("select");
                // form 表单赋值
                // modify 为class="layui-form" 所在元素属性 lay-filter="" 对应的值
                form.val("modify",{
                    "id":data.id,
                    "roomcode":data.roomcode,
                    "typeid":tid,
                    "status":data.status
                });
                // 打开弹出框
                layer.open({
                    title: '修改客房'
                    ,type:1
                    ,area: ['400px', '500px']
                    ,offset: '100px'
                    ,content:$("#updGustRoomForm")
                    ,moveOut:true
                });
                // 监听表单的提交事件
                form.on("submit(formDemo)",function(text){
                    // 1.先获取到表单中的所有数据，将数据传到后台
                    $.ajax({
                        url:'${pageContext.request.contextPath}/gustroom/upd',
                        type:"post",
                        async:false,
                        dataType:"JSON",
                        data:text.field,
                        success:function (flag) {
                            if(flag>0){
                                layer.msg("修改成功");
                            }else {
                                layer.msg("修改失败,请检查数据是否出错");
                            }
                        },
                        error:function (flag) {
                            layer.msg("服务器内部出错");
                        }
                    });
                    layer.closeAll();
                    //刷新一下table
                    table.reload('test', {
                        page: {
                            curr: 1
                        }
                    });
                    return false;
                });
            }
        });

        // 将获取部门信息的封装成一个方法
        function getRoomType() {
            $.ajax({
                async: false,
                url: '${pageContext.request.contextPath}/type',
                type: 'POST',
                dataType: 'json',
                data: {},
                success: function (data) {
                    if(data == null){
                        layer.msg("没有找到相应的房间类型信息");
                    }else {
                        roomtype = data.data;
                    }
                },
                error: function () {
                    layer.msg("没有找到相应的房间类型信息");
                }
            });
        }

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            switch (obj.event) {
                case 'addGust':
                    // 给角色下拉框添加数据
                    $("#roomtype1").empty();
                    $.each(roomtype, function (index, item) {
                        let tr = "<option value='" + item.id + "'>" + item.name + "</option>"
                        $("#roomtype1").append(tr);
                    })
                    form.render("select");

                    layer.open({
                        title: '添加客房'
                        ,type:1
                        ,area: ['400px', '500px']
                        ,offset: '100px'
                        ,content:$("#addGustRoomForm")
                        ,moveOut:true
                    });
                    form.on("submit(formDemo)",function(data){
                        // 1.先获取到表单中的所有数据，将数据传到后台
                        $.ajax({
                            url:'${pageContext.request.contextPath}/gustroom/add',
                            type:"post",
                            async:false,
                            dataType:"JSON",
                            data:data.field,
                            success:function (flag) {
                                if(flag>0){
                                    layer.msg("添加成功");
                                }else {
                                    layer.msg("添加失败,请检查数据是否出错");
                                }
                            },
                            error:function (flag) {
                                layer.msg("服务器内部出错");
                            }
                        });
                        layer.closeAll();
                        //刷新一下table
                        table.reload('test', {
                            page: {
                                curr: 1
                            }
                        });
                        return false;
                    });
                    break;
            }
        });
    });
</script>
</html>
